<template>
	<view class="ucenter-page">
		<u-navbar title-size="36"  height="42" :border-bottom="false" title="线索详情"></u-navbar>
		<view class="content">
			<view class="product-info">
				<view class="product-info__label">
					佣金
				</view>
				<view class="product-info__val">
					<text class="number">26000</text>
					元
				</view>
				<button type="default" class="btn tx-in">去提现</button>
			</view>
			<view class="clue-cells">
				<view class="clue-cell" v-for="(res,index) in list" :key="res.id">
					<view class="clue-cell-hd flex">
						<view class="clue-cell-left">
							<image :src="res.img" mode="" class="img"></image>
						</view>
						<view class="clue-cell-info flex_bd">
							<view class="name ellipsis"><text>{{res.model}}</text> * <text>{{res.number}}</text>台</view>
							<view class="keys">
								<view class="key" v-for="(item,index) in res.keys" :key="index">{{item}}</view>
							</view>
						</view>
					</view>
					<view class="clue-cell-bd flex">
						<image src="../../static/images/coin.png" mode="" class="coin"></image>
						<text class="yj">预计佣金{{res.yj}}元</text>
						<text class="tx" v-if="res.tx">可提现佣金{{res.tx}}元</text>
						<button type="default" v-if="res.tx" class="btn mx-btn" @click="show = true">明细</button>
					</view>
				</view>
			</view>
			<u-popup v-model="show" mode="center" border-radius="20" width="92%">
				<view class="popup-content">
					<image src="../../static/images/close-fill.png" class="close" mode="" @click="show = false"></image>
					<view class="popup-head">
						<view class="popup-title">明细</view>
					</view>
					<view class="popup-body">
						<view class="order-box">
							<view class="name">已成交高空机械ZE205E-12 * 1</view>
							<view class="price flex-center">
								<image src="../../static/images/coin.png" mode="" class="coin"></image>
								<text class="com">佣金3000元</text>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<view class="clue-card">
				<view class="clue-item flex">
					<view class="label">分享人:</view>
					<view class="val">刘军<text class="green">13912349876</text></view>
				</view>
			</view>
			<view class="clue-card">
				<view class="clue-item flex">
					<view class="label">客户:</view>
					<view class="val">张山<text class="green">13912349876</text></view>
				</view>
				<view class="clue-item flex">
					<view class="label">销售:</view>
					<view class="val">张左文<text class="green">13912349876</text></view>
				</view>
				<view class="clue-item flex">
					<view class="label">线索:</view>
					<view class="val">YB20190910</view>
				</view>
				<view class="clue-item flex">
					<view class="label">日期:</view>
					<view class="val">2021-02-18</view>
				</view>
				<view class="clue-item flex">
					<view class="label">区域:</view>
					<view class="val">湖南省长沙市开福区</view>
				</view>
			</view>
			<view class="clue-card">
				<view class="clue-item flex">
					<view class="label">备注:</view>
					<view class="val">该客户资质较好，资金周转压力大，希望公司提供抵押担保进入服务</view>
				</view>
			</view>
			<view class="clue-panel">
				<view class="head">
					<view class="title">跟进状态</view>
					<view class="arrow">
						<button type="default" class="btn appeal-btn" @click="show1 = true">申诉</button>
					</view>
				</view>
				<!-- ---------- -->
				<u-popup v-model="show1" mode="center" border-radius="20" width="92%">
					<view class="popup-content popup-modal">
						<view class="popup-head">
							<view class="popup-title">申诉</view>
						</view>
						<view class="popup-body">
							<view class="u-cell">
								<textarea class="ui-textarea" maxlength="200" placeholder="输入申诉内容…" placeholder-style="color:#BFBFBF;"/>
							</view>
							<view class="u-cell">
								<view class="upload-box">
									<u-upload :custom-btn="true" width="140" height="140">
										<view slot="addBtn" class="slot-btn">
											<image src="../../static/images/upload.png" mode="" class="upload-icon"></image>
											<view class="upload-text">上传照片</view>
										</view>
									</u-upload>
								</view>
							</view>
							<view class="popup-foot">
								<button type="default" class="btn" @click="show1 = false">取消</button>
								<button type="default" class="btn btn-primary">提交</button>
							</view>
						</view>
					</view>
				</u-popup>
				<!-- ---------- -->
				<view class="clue-body">
					<u-time-line>
						<u-time-line-item>
							<!-- 此处自定义了左边内容，用一个图标替代 -->
							<template v-slot:node>
								<view class="u-node"></view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-head">
										<view class="u-order-state">已关闭</view>
										<view class="u-order-time">2021-05-19 18:03</view>
									</view>
									<view class="u-order-desc">
										尊敬的xxx，很遗憾，您推荐的客户已经采购其他品牌，感谢您对中联重科的支持，小云为您准备了商机核实佣金奖励，快来领取吧。</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:node>
								<view class="u-node" style="background: #9DC851;"></view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-head">
										<view class="u-order-state green">跟进中</view>
										<view class="u-order-time">2021-05-14 13:12</view>
									</view>
									<view class="u-order-desc">尊敬的xxx，营销代表xxx正在持续跟进线索，佣金离您越来越近了，您可以先<text
											class="green">完善个人资料</text>，提前做好接佣准备。</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:node>
								<view class="u-node" style="background: #9DC851;"></view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-head">
										<view class="u-order-state green">跟进中 (有成单设备出现）</view>
										<view class="u-order-time">2021-05-14 13:12</view>
									</view>
									<view class="u-order-desc">尊敬的XXX，恭喜您，您推荐的线索中有一台XXX机型已经成单了，小云为您准备了丰厚的商机成交佣金，快来领取吧。</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:node>
								<view class="u-node"></view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-head">
										<view class="u-order-state">已分派</view>
										<view class="u-order-time">2021-05-14 13:12</view>
									</view>
									<view class="u-order-desc">尊敬的xxx，区域经理xxx正指派就近的业务人员跟进，请继续关注下一步进展。</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:node>
								<view class="u-node"></view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-head">
										<view class="u-order-state">已接单</view>
										<view class="u-order-time">2021-05-14 13:12</view>
									</view>
									<view class="u-order-desc">尊敬的xxx，我们正在核实您提供的线索，请保持关注，小云将实时向您推送最新的跟进情况。</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</view>
			<view class="clue-panel">
				<view class="head">
					<view class="title">历史记录</view>
				</view>
				<view class="clue-body">
					<view class="clue-dh">
						<view class="clue-obj">
							<text class="name">我</text>
							<text class="time">2021-09-08 12:56</text>
						</view>
						<view class="clue-talk">
							我的实际收到佣金为啥少了500块钱！
						</view>
					</view>
					<view class="clue-dh kf">
						<view class="clue-obj">
							<text class="name">客服</text>
							<text class="time">2021-09-08 12:56</text>
						</view>
						<view class="clue-talk">
							实在抱歉，预计佣金并非实际佣金
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				show1: false,
				list:[{
					id:1,
					img:'../../static/images/indexpic.jpg',
					model:'ZE135E-10',
					number:3,
					keys:['成交1台','丢单1台','跟进中1台'],
					yj:6000,
				},{
					id:2,
					img:'../../static/images/indexpic.jpg',
					model:'ZE135E-10',
					number:4,
					keys:['成交1台','丢单1台','终止需求1台','跟进中1台'],
					yj:6000,
					tx:4000
				},
				{
					id:3,
					img:'../../static/images/indexpic.jpg',
					model:'ZE135E-10',
					number:5,
					keys:['成交1台','丢单1台','跟进中1台'],
					yj:6000,
					tx:4000
				}]
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.content {
		padding: 32rpx;
	}

	.product-info {
		background: url(../../static/images/zoom.png) no-repeat center;
		height: 112rpx;
		background-size: cover;
		display: flex;
		align-items: center;
		line-height: 112rpx;
		position: relative;
		margin-bottom: 24rpx;

		.product-info__label {
			width: 180rpx;
			font-size: 32rpx;
			color: #fff;
			padding-left: 46rpx;
			background-color: #303337;
			background-size: cover;
			position: relative;
		}

		.product-info__label::after {
			content: '';
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			width: 0;
			height: 0;
			border-top: 112rpx solid #A2C833;
			border-left: 48rpx solid transparent;
		}

		.product-info__val {
			color: #fff;
			font-size: 28rpx;

			.number {
				font-size: 48rpx;
				font-weight: 600;
				margin-right: 4rpx;
			}
		}

		.tx-in {
			font-size: 28rpx;
			color: #9DC851;
			background-color: #fff;
			line-height: 64rpx;
			padding: 0 18rpx;
			border-radius: 32rpx;
			position: absolute;
			right: 24rpx;
			top: 50%;
			margin-top: -32rpx;
		}
	}

	.clue-cells {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		padding: 12rpx 32rpx;

		.clue-cell {
			padding: 20rpx 0;

			.clue-cell-hd {
				margin-bottom: 12rpx;

				.clue-cell-left {
					width: 160rpx;
					margin-right: 16rpx;

					.img {
						width: 100%;
						height: 144rpx;
						border-radius: 12rpx;
					}
				}

				.clue-cell-info {
					.name {
						font-size: 28rpx;
						color: #303337;
						line-height: 40rpx;
						margin-bottom: 14rpx;
					}

					.keys {
						.key {
							font-size: 24rpx;
							color: #fff;
							line-height: 36rpx;
							padding: 0 8rpx;
							background-color: #A2C833;
							border-radius: 6rpx;
							display: inline-block;
							margin-right: 10rpx;
						}
					}
				}
			}

			.clue-cell-bd {
				position: relative;
				background: linear-gradient(270deg, rgba(254, 103, 20, 0) 0%, rgba(254, 103, 20, 0.15) 100%);
				height: 52rpx;
				padding: 10rpx 8rpx;
				font-size: 24rpx;
				color: #606366;
				line-height: 32rpx;

				.coin {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				text {
					margin-right: 20rpx;
				}

				.tx {
					color: #FE6714;
				}

				.mx-btn {
					font-size: 24rpx;
					color: #FE6714;
					position: absolute;
					right: 0;
					top: 0;
					height: 52rpx;
					border-radius: 26rpx;
					border: 2rpx solid #FE6714;
					padding: 0 18rpx;
					line-height: 48rpx;
				}
			}
		}
	}

	.clue-card {
		background-color: #fff;
		margin-bottom: 24rpx;
		border-radius: 12rpx;
		padding: 16rpx 32rpx;

		.clue-item {
			font-size: 28rpx;
			color: #303337;
			line-height: 2;

			.label {
				padding-right: 10rpx;
				white-space: nowrap;
			}

			.val {

				text {
					margin-left: 20rpx;
				}
			}
		}
	}

	.clue-panel {
		background-color: #fff;
		margin-bottom: 24rpx;
		border-radius: 12rpx;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 32rpx;

			.title {
				font-size: 32rpx;
				color: #303337;
				font-weight: 600;
				line-height: 44rpx;
			}

			.arrow {
				.appeal-btn {
					font-size: 24rpx;
					color: #FFFFFF;
					background-color: #A5A098;
					line-height: 48rpx;
					border-radius: 24rpx;
					width: 92rpx;
					padding: 0;
				}
			}
		}

		.clue-body {
			padding: 0 32rpx 32rpx;
		}
	}

	.green {
		color: #9DC851 !important;
	}


	.u-node {
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #303337;
	}

	.u-order-head {
		display: flex;
		align-items: flex-end;
		margin-bottom: 8rpx;
	}

	.u-order-desc {
		color: #606366;
		font-size: 26rpx;
		line-height: 40rpx;
	}

	.u-order-time {
		color: #9C9C9C;
		font-size: 24rpx;
	}

	.u-order-state {
		color: #606366;
		font-size: 28rpx;
		margin-right: 24rpx;
	}

	.clue-dh {
		.clue-obj {
			font-size: 24rpx;
			color: #9C9C9C;
			margin-bottom: 8rpx;

			.name {
				margin-right: 20rpx;
			}
		}

		.clue-talk {
			margin-left: 20rpx;
			padding: 20rpx 24rpx;
			border-radius: 6rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #735538;
			background-color: #FDF7D7;
			position: relative;
		}

		.clue-talk::before {
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border-bottom: 18rpx solid transparent;
			border-right: 20rpx solid #FDF7D7;
			left: -20rpx;
			top: 16rpx;
		}
	}

	.clue-dh+.clue-dh {
		margin-top: 32rpx;
	}

	.clue-dh.kf {
		.clue-talk {
			color: #303337;
			background-color: #F3F4F6;
		}

		.clue-talk::before {
			border-right-color: #F3F4F6;
		}
	}

	.popup-content {
		position: relative;
		padding: 50rpx 32rpx 60rpx;

		.close {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			display: block;
			z-index: 11;
		}

		.popup-head {
			position: relative;
			margin-bottom: 50rpx;

			.popup-title {
				color: #303337;
				font-size: 40rpx;
				text-align: center;
				font-weight: 600;
				line-height: 56rpx;
			}
		}

		.order-box {
			background: rgba(252, 231, 219, 0.6);
			border-radius: 16rpx;
			border: 2rpx solid #FFD6BF;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 32rpx;

			.name {
				font-size: 32rpx;
				line-height: 48rpx;
				color: #666666;
				margin-bottom: 20rpx;
			}

			.price {
				.coin {
					width: 44rpx;
					height: 44rpx;
					margin-right: 14rpx;
				}

				.com {
					font-size: 40rpx;
					color: #FE6714;
					font-weight: 600;
				}
			}
		}
	
	   .popup-foot{
		   display: flex;
		   align-items: center;
		   justify-content: center;
		  
		   
		   .btn{
			   font-size: 32rpx;
			   color: #606366;
			   line-height: 80rpx;
			   border-radius: 40rpx;
			   width: 220rpx;
			   margin: 0 16rpx;
			   background-color: #ECEDED;
		   }
		   
		   .btn-primary{
			   color: #fff;
			   background-color: #A2C833;
		   }
	   }
	}
	
	
	.u-cell {
		position: relative;
	
		.ui-textarea {
			height: 212rpx;
			font-size: 28rpx;
			width: 100%;
			background-color: #F3F4F6;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 14rpx;
		}
	}
	
	.upload-box{
		margin: 0 -10rpx;
		.slot-btn{
			width: 140rpx;
			height: 140rpx;
			border: 2rpx dashed #D6DAE3;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin: 10rpx;
			
			.upload-icon{
				width: 50rpx;
				height: 44rpx;
			}
			
			.upload-text{
				font-size: 24rpx;
				color:#9C9C9C;
				margin-top: 10rpx;
			}
		}
	}
	
	
	/deep/ .u-upload .u-list-item{
		overflow:unset!important;
	}
	
	
	/deep/ .u-upload  .u-delete-icon{
		width: 40rpx;
		height: 40rpx;
		background: url(../../static/images/del.png) no-repeat center /cover!important;
		border-radius: 50%;
		right: -12rpx!important;
		top: -12rpx!important;
	}
	
	/deep/ .u-upload  .u-delete-icon .u-icon{
		display: none;
	}
	
	uni-modal{
		z-index: 19999!important;
	}
	
	.popup-modal{
		padding-bottom: 0;
		
		.popup-head{
			margin-bottom: 24rpx;
		}
		
		.popup-foot{
			padding: 38rpx 0 48rpx;
		}
	}
</style>
